<template>
	<HomeTopBar :titleHeight="titleHeight" :statusBarHeight="statusBarHeight" :topSrc="topSrc"/>
	<!-- backgroundImage: `url(${bgSrc})`,  -->
	<view class="content-header" :style="{ paddingTop: (titleHeight + statusBarHeight + 10) + 'px' }">
		<!-- <up-search placeholder="请输入关键字" v-model="keywords" :showAction="false"></up-search> -->
		<view class="swiper-view">
			<up-swiper
				:list="swiperList"
				indicator
				indicatorMode="line"
				circular
				height="250"
				img-mode="scaleToFill"
				
			></up-swiper>
		</view>
		
		<up-gap height="15"></up-gap>
		<!-- 
		<view class="menu-list-wrap" >
			<up-row>
				<up-col span="2.4" v-for="(item,index) in jingangList" :key="index">
					<view class="menu-item" @tap="handleMenu(item)">
						<up-image :src="item.icon" height="100rpx" mode="heightFix" class="logo" radius="5"></up-image>
						<view class="menu-name">{{item.name}}</view>
					</view>
				</up-col>
			</up-row>
			<up-row>
				<up-col span="2.4" v-for="(item,index) in jingangList2" :key="index">
					<view class="menu-item" @tap="handleMenu(item)">
						<up-image :src="item.icon" height="100rpx" mode="heightFix" class="logo" radius="5"></up-image>
						<view class="menu-name">{{item.name}}</view>
					</view>
				</up-col>
			</up-row>
		</view> -->
		<view class="centent-view">
			<view class="padding-view">
				<view class="activity-view">
					<view class="title-view">
						<view class="title">工会活动</view>
						<view class="more" @tap="handleTab">
							<span>查看更多</span>
							<up-icon name="arrow-right"></up-icon>
						</view>
					</view>
				
					<swiper class="swiper" circular :style="`height: ${minSwiperList.length==1?'220rpx':'220rpx'}`">
						<swiper-item v-for="(arr,index) in minSwiperList" :key="index" >
							<view style="display: flex;align-items: center;padding: 0 20rpx;">
								<view class="swiper-item" v-for="item in arr" :key="item.id">
									<up-image @tap="handleActivity(item)"
									:src="item.topImg || item.thumbnail" width="100%" height="200rpx" radius="10" ></up-image>
									<view class="swiper-title"> 
										<view class="title">{{item.activityTitle}}</view>
									</view>
								</view> 
							</view>
						</swiper-item>
					</swiper>
					<up-gap height="10"></up-gap>
					<view style="padding: 0 25rpx;">
						<up-image src="https://chqyoss.leijue.net/pic/pic2.jpg" width="100%" height="300rpx" radius="10"></up-image>
					</view>
					<up-gap height="10"></up-gap>
				</view>
				<up-gap height="15"></up-gap>
				
				<view class="news-wrap" v-if="newsList.length > 0">
					<up-tabs
					:scrollable="false"
					:list="tabList"
					@click="tabClick"
					lineColor="#ff4e4e"
					lineWidth="70"
					:activeStyle="{ color: '#ff4e4e', fontSize: '32rpx', fontWeight: 'bold' }"
					:inactiveStyle="{ fontSize: '32rpx', fontWeight: 'bold', color: '#999999' }"
					>
					</up-tabs>
					
					<view class="news-list">
						<view class="news-item-view" v-for="(item,index) in newsList" :key="index" @tap="getNewsDetail(item.id)">
							<view class="news-title">{{item.title}}</view>
						
							<view class="news-info">
								<up-image :src="it" width="194rpx" height="128rpx"  v-for="(it,i) in item.surfacePlots" :key="i" radius="5"></up-image>
							</view>
							<view class="bottom-info">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view style="margin-top: 30rpx;">
						<button v-if="newsList.length>0" @tap="nav2More" style="background-color: red;color:#fff;border-radius: 10px;">查看更多</button>
						<up-empty mode="data" iconSize="60" text="暂无数据" icon="https://jqgh-public.yqfoodec.com/20250405/%E7%BB%84%2016@2x_53897.png" v-else></up-empty>
					</view>
					
					
				</view>
			</view>
			
		</view>
	</view>

	
</template>

<script>
	import HomeTopBar from '@/components/system/HomeTopBar.vue'
	import {propagateNewsApi} from '@/api/news/propagate-news-api.js'
	import { activityApi } from '@/api/activity/activity-app.js';
	import { paramsApi } from '@/api/params/params-api.js';
	
	export default {
		components: {
			HomeTopBar
		},
		data() {
			return {
				activeName: '工会要闻',
				titleHeight: 0,
				statusBarHeight: 0,
				topSrc: 'https://qiniu.mageexiao.com/top.png',
				bgSrc: 'http://files.jt-cap.com/111.png',//../../static/images/icon/home/bg.png', //'https://qiniu.mageexiao.com/bg.png',
				keywords: '',
				swiperList: [
					'https://chqyoss.leijue.net/pic/pic1.jpg'
				],
				minSwiperList: [
					{
						img: 'https://jqgh-public.yqfoodec.com/20250330/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250330145855_53964.png', 
						url: '../../brisk-walking/index?type=1',
						type: '1'
					},
					{
						img: 'https://jqgh-public.yqfoodec.com/20250330/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250330145900_54045.png',
						url: ''
					}
					
				],
				tabList: [
					{
						name: '工会要闻'
					},
					{
						name: '工会动态'
					},
					{
						name: '通知公告'
					}
				],
				jingangList: [
					// {name: '劳模先进榜', icon: '/static/images/icon/home/1.png', url: '../../model-worker/index', type: '1'},
					// {name: '创新工作室', icon: '/static/images/icon/home/2.png', url: '../../innovation-studio/index', type: '1'},
					// {name: '恋爱交友', icon: '/static/images/icon/home/3.png', url: '../../user-page/undeveloped-page?title=恋爱交友', type: '1'},
					// {name: '兴趣协会', icon: '/static/images/icon/home/4.png', url: '../../user-page/undeveloped-page?title=兴趣协会', type: '1'},
					// {name: '场馆预约', icon: '/static/images/icon/home/5.png', url: '../../user-page/undeveloped-page?title=场馆预约', type: '1'}
				],
				jingangList2: [
					// {name: '福利慰问', icon: '/static/images/icon/home/6.png', url: 'wx7c30855f2dbce11b', type: '3'},
					// {name: '职工活动', icon: '/static/images/icon/home/7.png', url: '/pages/activity-centre/index', type: '2'},
					// {name: '帮扶慰问', icon: '/static/images/icon/home/8.png', url: '../../assistance-center/index', type: '1'},
					// {name: '主席信箱', icon: '/static/images/icon/home/9.png', url: '/publicity-education/mailbox/index', type: '1'},
					// {name: '更多服务', icon: '/static/images/icon/home/10.png', url: '/pages/staff-centre/index', type: '2'},
				],
				newsRequest:{
					page:1,
					limit:10,
					contentType:0,
				},
				newsList:[],
				currentContentType:0,
				orgName: ''
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo')
			this.orgName = userInfo.orgName || '食品集团'
			this.getNewsList();
			this.getActivity()
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareTimeline']
			})
			this.getParams();
		},
		created() {
			
			let titleHeight = 0
			const { statusBarHeight, system } = uni.getSystemInfoSync()
			
			if (system.indexOf('Android') > 0) {
				titleHeight = 48
			} else {
				titleHeight = 44
			}
			
			this.titleHeight = titleHeight
			this.statusBarHeight = statusBarHeight
		},
		methods: {
			async getParams(){
				const result = await paramsApi.getIndexNavList();
				this.jingangList = result.data.jingangList;
				this.jingangList2 = result.data.jingangList2;
			},
			async getActivity() {
				const result = await activityApi.getTopActivityList();
				let arr = [];
				for (let i = 0; i < result.data.length; i += 2) {
					arr.push(result.data.slice(i, i + 2));
				}
				
				this.minSwiperList = arr // result.data
		
				// activityTitle: "迎工运百年华诞，贺"e食住行"升级"
				// businessType: 7
				// id: 17
				// thumbnail: 
			},
			// 置顶活动跳详情,businessType:2 单独的知识竞赛,4随手拍,7健步走
			handleActivity(item) { // topImg
				if (item.businessType == 2) {
					uni.navigateTo({
						url: '/brisk-walking/knowledgeContest?id=' + item.id + '&type=3'
					});
				} else if (item.businessType == 4) {
					uni.navigateTo({
						url: `/brisk-walking/instashot/list?id=${item.id}&type=2`
					})
				} else if (item.businessType == 7) {
					uni.navigateTo({ // activityBgImage
						url: `/brisk-walking/transfer?title=${item.activityTitle}&id=${item.id}&activityBgImage=${item.activityBgImage}&activityStatus=${item.activityStatus}`
					})
				} else { // 其他类型活动未开发
					uni.navigateTo({
						url: `/user-page/undeveloped-page?title=${item.activityTitle}`
					})
				}
			},
			goUndevelopedPage() {
				uni.navigateTo({
					url: `/user-page/undeveloped-page?title=`
				})
			},
			handleTab() {
				uni.switchTab({
					url: '/pages/activity-centre/index'
				})
			},
			handleMenu(item) {
				if (item.url) {
					if (item.type == '2') { // tabbar页面
						uni.switchTab({url: item.url})
					} else if(item.type == '3') { // 小程序
						uni.navigateToMiniProgram({
							appId: item.url
						})
					} else { // 普通页面
						uni.navigateTo({url: item.url})
					}
					
				}
				
			},
			async tabClick(item) {
				this.activeName = item.name
				const index = item.index;
				this.currentContentType = index;
				this.newsRequest = {page:1,limit:10,contentType:index}
				this.getNewsList();
			},
			getNewsDetail(id) {
				uni.navigateTo({
				    url: '../../publicity-education/news-information/detail?id=' + id
				});
			},
			nav2More(){
				uni.navigateTo({
				    url: '../../publicity-education/news-information/index?title=' + this.activeName + '&contentType='+this.currentContentType
				});
			},
			async getNewsList(){
				uni.showLoading({
					title:'加载中',
				})
				this.newsList = [];
				const result = await propagateNewsApi.queryList(this.newsRequest);
				uni.hideLoading();
				this.newsList = result.data.list;
				for (var i = 0; i < this.newsList.length; i++) {
					let item = this.newsList[i];
					let pic = item.surfacePlot.split(',');
					item.surfacePlots = pic;
				}
			},
			onShareAppMessage() {
				return {
					title: this.orgName, //分享的标题
					path: `/pages/index/index`, //点击分享链接之后进入的页面路径
					imageUrl: '', //分享发送的链接图片地址
					success() {
						// 分享完成，请注意此时不一定是成功分享
						uni.showToast({
							title: "分享成功",
							duration: 3500,
							icon: "success"
						});
					},
					fail() {
						// 分享失败
						uni.showToast({
							title: "分享失败",
							duration: 3500,
							icon: "error"
						});
					}
				};
			},
			onShareTimeline() {
				return {
				  title: this.orgName,
				  query: '',
				  imageUrl: ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

.content-header {
	background-color: #F5F6FA; //#f3eded;
	background-image: url('http://files.jt-cap.com/111.png');
	background-repeat: no-repeat;
	background-size: 100% 391px;
	// background: linear-gradient(to bottom, #d81e06, #F5F5F5);
	// -webkit-background-clip: text;
	.swiper-view {
		padding: 0 30rpx;
		
	}
	.menu-list-wrap {
		padding: 0 10rpx;
	}
	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
		.menu-name {
			font-size: 24rpx;
			color: #333333;
			height: 50rpx;
			line-height: 50rpx;
		}
	}
}

.swiper-item {
	margin: 0 10rpx;
	flex: 1;
	// width: 50%;
	position: relative;
	background-color: #F3F4F6;
	border-radius: 10px;
	.swiper-title {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40rpx;
		line-height: 40rpx;
		background-color: rgb(0 0 0 / 53%);
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		.title {
			font-size: 24rpx;
			color: #fff;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 10rpx;
		}
	}
}
.centent-view {
	// background-color: #F5F6FA; //#F5F5F5;
	padding-bottom: 50rpx;
	
	.padding-view {
		padding: 0 30rpx;
		.activity-view {
			background-color: #fff;
			padding: 30rpx 0;
			border-radius: 20rpx;
			.title-view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				.title {
					font-size: 32rpx;
					font-weight: 700;
				}
				.more {
					font-size: 28rpx;
					color: #999999;
					display: flex;
				}
			}
		}
		.news-wrap {
			background-color: #fff;
			padding: 0 30rpx 30rpx 30rpx;
			border-radius: 20rpx;
			.news-list {
				color: $uni-text-color;
				font-size: 28rpx;
				
				.news-item-view{
					// margin-bottom: 20rpx;
					padding: 30rpx 0;
					border-bottom: 1px solid #DFDFDF;
					.news-title {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #333333;
						font-size: 28rpx;
					}
					.news-info {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						margin: 20rpx 0;
					} 
					.news-info::after {
					    height: 0;
						width: 30%;
					    visibility: hidden;
					}
					.bottom-info {
						font-size: 24rpx;
						color: $uni-text-color-grey;
					}
				}
			}
		}
	}
}


</style>
